<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Declare page as mobile friendly --> 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Declare page as iDevice WebApp friendly -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- iDevice WebApp Splash Screen, Regular Icon, iPhone, iPad, iPod Retina Icons -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png"> 
<!-- iPhone 3, 3Gs -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 			media="screen and (max-device-width: 320px)" /> 
<!-- iPhone 4 -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />

<!-- Page Title -->
<title>Metfind movil</title>

<!-- Stylesheet Load -->
<link href="styles/style.css"				rel="stylesheet" type="text/css">
<link href="styles/framework-style.css" 	rel="stylesheet" type="text/css">
<link href="styles/framework.css" 			rel="stylesheet" type="text/css">
<link href="styles/bxslider.css"			rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"			rel="stylesheet" type="text/css">
<link href="styles/icons.css"				rel="stylesheet" type="text/css">
<link href="styles/ui-lightness/jquery-ui-1.9.2.custom.css"				rel="stylesheet" type="text/css">
<link href="styles/retina.css" 				rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


<!--Page Scripts Load -->
<script src="scripts/jquery.min.js"		 type="text/javascript"></script>	
<script src="scripts/snap.js"			 type="text/javascript"></script>
<script src="scripts/hammer.js"			 type="text/javascript"></script>	

<script src="scripts/subscribe.js"		 type="text/javascript"></script>
<script src="scripts/contact.js"		 type="text/javascript"></script>
<script src="scripts/jquery.swipebox.js" type="text/javascript"></script>
<script src="scripts/bxslider.js"		 type="text/javascript"></script>
<script src="scripts/colorbox.js"		 type="text/javascript"></script>
<script src="scripts/retina.js"			 type="text/javascript"></script>
<script src="scripts/custom.js"			 type="text/javascript"></script>
<script src="scripts/framework.js"		 type="text/javascript"></script>
<script src="scripts/jquery-ui.js"   type="text/javascript"></script>
<script src="scripts/jqueryuitp.js"   type="text/javascript"></script>
<script>
function send()
{

	//$( "#dialog" ).dialog( "open" );
}
function rdy()
{
	/* $( "#dialog" ).dialog({
		 	position: "top",
			 autoOpen: false,

			 modal: true,
			/* buttons: {
				 "Enviar con e-mail": function() {
					 
					 
				 },
				 "Enviar sin e-mail": function() {
				 	$( this ).dialog( "close" );
				 }
			 },
			 close: function() {
			 allFields.val( "" ).removeClass( "ui-state-error" );
		 }
		 });*/
	
	
	$("#slider1").slider(
	{
		min:-150,
		max:150,
		slide: function( event, ui ) 
		{
			var r=230;
			var g=230;
			var b=230;
			
			if(ui.value>0)
			{
				r=r-ui.value;
				b=b-ui.value;
				$( "#slider1" ).css('background', 'rgb('+r+','+g+','+b+')');
				$( "#comentar1" ).css('background', 'rgb('+r+','+g+','+b+')');
				
				var opa=0.5+(ui.value/150.0)/2.0;	
				$("#happy1").css({ opacity: opa });
				$("#angry1").css({ opacity: 1-opa });
			}
			else
			{
				g=g+ui.value;
				b=b+ui.value;
				$( "#slider1" ).css('background', 'rgb('+r+','+g+','+b+')');
				$( "#comentar1" ).css('background', 'rgb('+r+','+g+','+b+')');
				
				var opa=0.5-(ui.value/150.0)/2.0;
				$("#angry1").css({ opacity: opa });
				$("#happy1").css({ opacity: 1-opa });
			}
			
			
			
			
		}
	})
	$( "#slider1" ).css('background', 'rgb(230,230,230)');
	$("#angry1").css({ opacity: 0.5 });
	$("#happy1").css({ opacity: 0.5 });
	
	
	$("#slider2").slider(
			{
				min:-150,
				max:150,
				slide: function( event, ui ) 
				{
					var r=230;
					var g=230;
					var b=230;
					
					if(ui.value>0)
					{
						r=r-ui.value;
						b=b-ui.value;
						$( "#slider2" ).css('background', 'rgb('+r+','+g+','+b+')');
						var opa=1-ui.value/150.0;
						
						var opa=0.5+(ui.value/150.0)/2.0;	
						$("#happy2").css({ opacity: opa });
						$("#angry2").css({ opacity: 1-opa });
					}
					else
					{
						g=g+ui.value;
						b=b+ui.value;
						$( "#slider2" ).css('background', 'rgb('+r+','+g+','+b+')');

						var opa=0.5-(ui.value/150.0)/2.0;
						$("#angry2").css({ opacity: opa });
						$("#happy2").css({ opacity: 1-opa });
					}
					
					
					
					
				}
			})
			$( "#slider2" ).css('background', 'rgb(230,230,230)');
	$("#angry2").css({ opacity: 0.5 });
	$("#happy2").css({ opacity: 0.5 });
	
	
	$("#slider3").slider(
			{
				min:-150,
				max:150,
				slide: function( event, ui ) 
				{
					var r=230;
					var g=230;
					var b=230;
					
					if(ui.value>0)
					{
						r=r-ui.value;
						b=b-ui.value;
						$( "#slider3" ).css('background', 'rgb('+r+','+g+','+b+')');
						
						var opa=0.5+(ui.value/150.0)/2.0;	
						$("#happy3").css({ opacity: opa });
						$("#angry3").css({ opacity: 1-opa });
					}
					else
					{
						g=g+ui.value;
						b=b+ui.value;
						$( "#slider3" ).css('background', 'rgb('+r+','+g+','+b+')');

						var opa=0.5-(ui.value/150.0)/2.0;
						$("#angry3").css({ opacity: opa });
						$("#happy3").css({ opacity: 1-opa });
					}
					
					
					
					
				}
			})
			$( "#slider3" ).css('background', 'rgb(230,230,230)');
	$("#angry3").css({ opacity: 0.5 });
	$("#happy3").css({ opacity: 0.5 });
	
	
	
	$("#slider4").slider(
			{
				min:-150,
				max:150,
				slide: function( event, ui ) 
				{
					var r=230;
					var g=230;
					var b=230;
					
					if(ui.value>0)
					{
						r=r-ui.value;
						b=b-ui.value;
						$( "#slider4" ).css('background', 'rgb('+r+','+g+','+b+')');
						
						var opa=0.5+(ui.value/150.0)/2.0;	
						$("#happy4").css({ opacity: opa });
						$("#angry4").css({ opacity: 1-opa });
					}
					else
					{
						g=g+ui.value;
						b=b+ui.value;
						$( "#slider4" ).css('background', 'rgb('+r+','+g+','+b+')');

						var opa=0.5-(ui.value/150.0)/2.0;
						$("#angry4").css({ opacity: opa });
						$("#happy4").css({ opacity: 1-opa });
					}
					
					
					
					
				}
			})
			$( "#slider4" ).css('background', 'rgb(230,230,230)');
	$("#angry4").css({ opacity: 0.5 });
	$("#happy4").css({ opacity: 0.5 });
}

</script>
</head>
<body onload="rdy()">
<div id="dialog"></div>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Cargando contenido...
            <em>Esto depende de tu conexion a internet!</em>
        </p>
    </div>
</div>

	<div class="header">
    	<img class="logo" alt="img" src="images/logo1.png" width="150">
   		<div class="social-icons">
        	<a href="https://www.facebook.com/metfind" class="facebook-icon"></a>
            <a href="https://twitter.com/Metfind" class="twitter-icon"></a>
            
        </div> 
        
    </div>

	<div class="content" style="hight:6000px"> 
    	<div class="decoration"></div>
    	
            	<h1 class="center-text">Bienvenido a Dei Templi</h1>
            	<h2 class="center-text">estas evaluando desde la habitacion #2. </h2>
            <p class="center-text">	Tu opinion sera enviada de forma directa y privada al administrador para poder brindarte un mejor servicio.
            </p>
    	
    <div class="decoration"></div>
    	
    	<div style="background-color:rgb(250,250,250)">
    		<h4 style="font-weight:bold;">RECEPCION</h4>
    		<div id="angry1" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left">  <div id="slider1"></div><!--<p></p><div id="comentar1" style="width:100%;height:20px;color:black;border-radius:5px 5px 5px 5px;font-weight:bold;" class="center-text">Comentar</div>--></div>
    		<div id="happy1" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
			
    	</div>
    	
    	
    	
    	
    	<div style="background-color:rgb(250,250,250)">
    		<p></p>
    		<h4 style="font-weight:bold;">SERVICIOS</h4>
    		<div id="angry2" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left"><div id="slider2"></div></div>
    		<div id="happy2" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
 
    	</div>
    	
    	
    	
    	<div style="background-color:rgb(250,250,250)">
    		<p></p>
    		<h4 style="font-weight:bold;">DISPOSICION</h4>
    		<div id="angry3" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left"><div id="slider3"></div></div>
    		<div id="happy3" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>

    	</div>
    	
    	
    	
    	<div style="background-color:rgb(250,250,250)">
    		<p></p>
    		<h4 style="font-weight:bold;">INSTALACIONES</h4>
    		<div id="angry4" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left"><div id="slider4"></div></div>
    		<div id="happy4" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>

    	</div>
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	<!-- 
    
         <div class="bxslider-wrapper" data-snap-ignore="true">
            <div class="bxslider">
                <div>
                    <img src="images/slider/0.jpg" alt="img"/>
                    <blockquote class="slider-caption">
                        <p class="slider-title">
                            LESS IS<br>ALWAYS MORE
                        </p>
                    </blockquote>
                </div>
                <div>
                    <img src="images/slider/1.jpg" alt="img"/>
                    <blockquote class="slider-caption">
                        <p class="slider-title">
                            SIMPLE, CLEAN<br>AND PROPORTIONATE
                        </p>
                    </blockquote>
                </div>
            </div>
		</div>
        
        <div class="container no-bottom">
        	<h3>Welcome!</h3>
        	<p>Ciento brings the design and feel of iOS7 and flat flat interfaces to your device! Awesomely fast, made using our Epsilon framework, it’s gorgeous!</p>
        </div>
        
        <div class="decoration"></div>

		<div class="container no-bottom">
            <div class="column shadow">
                <div class="one-half">
                    <img class="center-icon" src="images/icons-large/icon2@2x.png" alt="img">
                    <h4 class="center-text uppercase">Large <br>compatibilty</h4>
                    <p class="center-text no-bottom">
                        Lorem ipsum dolor sit, consectetur adipisci. <br>
                    </p> 
                </div>
                <div class="one-half">
                    <img class="center-icon" src="images/icons-large/icon1@2x.png" alt="img">
                    <h4 class="center-text uppercase">Very <br> friendly</h4>
                    <p class="center-text no-bottom">
                        Lorem ipsum dolor sit, consectetur adipisci. <br>
                    </p> 
                </div>
            </div>
            <div class="column shadow">
                <div class="one-half">
                    <img class="center-icon" src="images/icons-large/icon3@2x.png" alt="img">
                    <h4 class="center-text uppercase">Thoroughly documented!</h4>
                    <p class="center-text no-bottom">
                        Lorem ipsum dolor sit, consectetur adipisci. <br>
                    </p> 
                </div>
                <div class="one-half">
                    <img class="center-icon" src="images/icons-large/icon4@2x.png" alt="img">
                    <h4 class="center-text uppercase">Built from experience</h4>
                    <p class="center-text no-bottom">
                        Lorem ipsum dolor sit, consectetur adipisci. <br>
                    </p> 
                </div>  
        	</div>      
        </div>
        
        <div class="decoration"></div>
        
        <div class="container no-bottom">
        	<h1 class="center-text">Want some more features?</h1>
            <p class="center-text">We have tons of features for you, check the navigation bellow or tap the button to see more!</p>
            <a class="flat-button flat-settings center-button" href="#">More Services</a>
        </div>
    
    	<div class="decoration"></div>

		<ul class="gallery gallery-homepage">
            <li>
                <a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!">
                    <img src="images/slider/0s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!">
                    <img src="images/slider/1s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!">
                    <img src="images/slider/2s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/4.jpg" title="An awesome gallery!">
                    <img src="images/slider/3s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/5.jpg" title="An awesome gallery!">
                    <img src="images/slider/4s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!">
                    <img src="images/slider/3s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/1.jpg" title="An awesome gallery!">
                    <img src="images/slider/0s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/2.jpg" title="An awesome gallery!">
                    <img src="images/slider/1s.jpg" alt="Image 001" />
                </a>
            </li>
            <li>
                <a class="swipebox" href="images/gallery/full/3.jpg" title="An awesome gallery!">
                    <img src="images/slider/2s.jpg" alt="Image 001" />
                </a>
            </li>
        </ul> -->

<p></p>
        
        
        <div class="decoration"></div>
        
        <p class="center-text no-bottom copyright-text">Metfind Ltda. Copyright 2013<br> Todos los derechos reservados</p>
        
        
    </div>

	
	<div class="navigation" style="z-index:500;background-color:rgb(252,252,252)">
    	<div class="navigation-wrapper">
            <a href="info.html" class="nav-item informacion-nav"></a>
            <a href="empleados.html" class="nav-item empleado-nav"></a>
            <a href="#" class="nav-item home-nav-selected"></a>
            <a href="opinar.html" class="nav-item blog-nav"></a>
            <a href="enviar.html" class="nav-item contact-nav center-text" style="padding-top:22px;padding-left:9px;color:black">Enviar</a>
        </div>
    </div>
	
</body>
</html>


